<script setup lang="ts">
import { bindBarcodeApi, getBarcodeAndScanPageAPI, getBarcodeDetailAPI, getBarcodeScanPageAPI } from '@/api/code'
import type { KpcodeBarcodeScanEntity } from '@/types/code'
import { useMemberStore } from '@/stores'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDeliveryNoAPI } from '@/api/account'
import { getSearchBusUserListAPI } from '@/api/business'
import type { ApplyBusiness } from '@/types/business'

const memberStore = useMemberStore()

// 搜索列表显示隐藏
const searchActive = ref(false)

// 搜索
const searchValue = ref('')
const companyList = ref<ApplyBusiness[]>([])
const search = async () => {
  const res = await getSearchBusUserListAPI(`?name=${searchValue.value}`)
  if (res.data.length > 0) {
    companyList.value = res.data
    searchActive.value = true
  } else {
    uni.showToast({
      title: '没有搜索到结果，请重新尝试',
      icon: 'none',
    })
  }
}

// 取消搜索
const cancel = () => {
  companyList.value = []
}

// 清楚搜索文字
const clear = () => {
  searchValue.value = ''
  companyList.value = []
}

// 添加公司
let companyName = ref('')
let companyId = ref('')
const addCompany = (item: any) => {
  companyName.value = item.name
  companyId.value = item.id
}

// 扫码获取信息
const openScanner = async () => {
  // 调用uni.scanCode()函数进行扫一扫操作
  uni.scanCode({
    success(res: UniApp.ScanCodeSuccessRes) {
      let code = res.result.split(',')[0]
      let obj = {
        codeNo: code,
        deliveryId: memberStore.profile.userId,
        deliveryName: memberStore.profile.name,
        deliveryPhone: memberStore.profile.phone,
        acsType: '2',
        busId: companyId.value,
        busName: companyName.value,
      }
      if (code.includes('BA')) {
        obj.acsType = '1'
      }
      bindCode(obj)
    },
  })
}

// 绑定乐促码
const bindCode = async (obj: object) => {
  const res = await bindBarcodeApi(obj)
  uni.showToast({ icon: 'none', title: res.data as string })
  if (res.code == '0') {
    getBarcodeAndScanPage()
    getDeliveryNo()
  }
}

// 获取我的配送列表
const list = ref<KpcodeBarcodeScanEntity[]>([])
const getBarcodeAndScanPage = async () => {
  let urlStr = `?deliveryId=${memberStore.profile.userId}`
  const res = await getBarcodeScanPageAPI(urlStr)
  list.value = res.data.records
}

// 获取配送数量
const num = ref('0')
const getDeliveryNo = async () => {
  const res = await getDeliveryNoAPI(memberStore.profile.userId)
  num.value = res.data as string
}

onLoad(() => {
  getBarcodeAndScanPage()
  getDeliveryNo()
})
</script>

<template>
  <!-- 个人资料 -->
  <view class="profile">
    <!-- 情况1：已登录 -->
    <view class="overview" v-if="true">
      <navigator url="/pagesMember/profile/profile" hover-class="none">
        <image class="avatar" mode="aspectFill" :src="memberStore.profile.avatar ? memberStore.profile.avatar : ''"></image>
      </navigator>
      <view class="meta">
        <view class="nickname">配送员：{{ memberStore.profile.nickname || memberStore.profile.name || memberStore.profile.username }} </view>
        <text class="update">{{ memberStore.profile.phone}}</text>
      </view>
      <div class="num">配送数量：{{ num }}</div>
    </view>
    <!-- 情况2：未登录 -->
    <view class="overview" v-else>
      <navigator url="/pages/login/login" hover-class="none">
        <image
          class="avatar gray"
          mode="aspectFill"
          src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
        ></image>
      </navigator>
      <view class="meta">
        <navigator url="/pages/login/login" hover-class="none" class="nickname"> 未登录 </navigator>
        <view class="extra">
          <text class="tips">点击登录账号</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 搜索得到的人员列表 -->
  <view class="search_list">
    <!-- 搜索框 -->
    <uni-search-bar
      @confirm="search"
      :focus="true"
      v-model="searchValue"
      @cancel="cancel"
      @clear="clear"
    >
    </uni-search-bar>
    <view v-if="companyList.length > 0">
      <view class="sear_item" v-for="item in companyList" :key="item.name">
        <view class="left">
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="btn_group">
          <button
            size="mini"
            style="color: #fff; background-color: #18bc37"
            @tap="addCompany(item)"
          >
            <uni-icons type="plus" size="14" color="#fff"></uni-icons> 选择
          </button>
        </view>
      </view>
    </view>
    <view v-else class="no_list">请输入商家名称搜索,选择商家后绑码</view>
  </view>

  <view class="list" v-if="companyName">
    <view class="title company_name">绑码公司：{{ companyName }}</view>
  </view>

  <view class="list">
    <view class="title">我的配送单</view>
    <navigator :url="'/pages/codeDetail/codeResDetail?id='+item.id" class="order" v-for="item in list" :key="item.id">
      <view class="top">
        <text class="name">{{ item.bindBusName }}</text>
        <view class="distance">
          <uni-icons type="location" size="12"></uni-icons>
          <uni-icons type="right" size="12"></uni-icons> 1.2km
        </view>
      </view>
      <view class="left">
        <view class="middle">
          <view class="num">数量：{{ item.scanNum }}</view>
          <view class="phone"><uni-icons type="phone" size="12"></uni-icons> 15458565956</view>
        </view>
      </view>
      <button size="mini" style="color: #fff; background-color: #26b99c">待配送</button>
    </navigator>
  </view>
  <view class="scan" v-if="companyName"
    ><image
      @tap="openScanner"
      class="scan_image"
      src="@/static/images/cv-sys.png"
      mode="aspectFill"
  /></view>
</template>
<style lang="scss">
/* 用户信息 */
.profile {
  padding: 40rpx 0;
  position: relative;
  background-color: rgb(0, 206, 170);

  .overview {
    display: flex;
    height: 120rpx;
    padding: 0 36rpx;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;
    .num {
      margin-bottom: 20rpx;
      font-size: 26rpx;
      align-self: flex-end;
    }
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .gray {
    filter: grayscale(100%);
  }

  .meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30rpx;
    padding: 16rpx 0;
    margin-left: 20rpx;
    flex: 1;
  }

  .nickname {
    max-width: 350rpx;
    margin-bottom: 16rpx;
    font-size: 30rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tips {
    font-size: 22rpx;
  }

  .update {
    padding: 3rpx 10rpx 1rpx;
    color: rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(255, 255, 255, 0.8);
    margin-right: 10rpx;
    border-radius: 30rpx;
    font-size: 20rpx;
  }
}
.list {
  .title {
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    align-items: center;
    padding-left: 15px;
    height: 40px;
    background-color: #26b99c;
    font-weight: normal;
    color: #fff;
    font-size: 14px;
  }
  .company_name {
    background-color: #999;
    margin: 10px;
    margin-top: 0;
  }
  .order {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 5px;
      .name {
        font-size: 30rpx;
      }
      .distance {
        font-size: 24rpx;
        color: #26b99c;
      }
    }
    .left {
      flex: 1;
      .middle {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .num {
          margin-right: 20px;
        }
      }
    }
    button {
      width: 80px;
      padding: 0;
    }
  }
}
.yuyue {
  padding-bottom: 40px;
}
.search_list {
  padding: 15px 15px 0;
  .sear_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    .left {
      flex: 1;
      font-size: 26rpx;
      line-height: 40rpx;
      display: flex;
      align-items: center;
      .name {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
      }
      .phone {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
      }
    }
    .btn_group {
      button {
        margin-left: 5px;
        padding: 0 10px;
        font-size: 24rpx;
      }
    }
  }
}
.btn {
  position: absolute;
  bottom: 20px;
  left: 30%;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  .link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background-color: #26b99c;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
  }
}
.no_list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 14px;
  color: #999;
}
</style>
